<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="ImitateBootstrapLayout.css">
    <script src="../../js/jquery-3.4.1.js"></script>
    <script src="../../resource/dhtmlxsuitev508proeval/codebase/dhtmlx.js"></script>
    <link rel="stylesheet" href="../../resource/dhtmlxsuitev508proeval/codebase/dhtmlx.css">
    <link rel="stylesheet" href="../../resource/dhtmlxsuitev508proeval/skins/skyblue/dhtmlx.css">
</head>
<body>
<div class="container-fluid" style="height: 100vh; padding: 5px 10px;">
    <div class="container-fluid imitate-dhtmlx-layout-border imitate-dhtmlx-layout-background" style="height: 18%; padding: 5px 10px; margin-bottom: 0.25%;">
        <fieldset class="imitate-dhtmlx-fieldset">
            <legend>搜索条件</legend>
            <div class="row align-self-center" style="height: 42%;">
                <!--
                说明:
                1. 给row设置高度100%后可以使用align-self-center将列居中, 然后放搜索条件
                -->
                <div class="col-1 align-self-center">
                    <button>sdsd</button>
                </div>
                <div class="col-sm align-self-center">
                    <input />
                    <button>sdsd</button>
                </div>
                <div class="col-3 align-self-center">
                    <button>sdsd</button>
                </div>
            </div>
            <div class="row">
                <div class="col-sm align-self-center">
                    <hr/>
                </div>
            </div>
            <div class="row" style="height: 42%;">
                <!--
                说明:
                1. 给row设置高度100%后可以使用align-self-center将列居中, 然后放搜索条件
                -->
                <div class="col-3 align-self-center">
                    <input />
                    <button>sdsd</button>
                </div>
            </div>
        </fieldset>
    </div>
    <div class="container-fluid imitate-dhtmlx-layout-border" style="height: 81%; padding: 5px 10px;">
        <fieldset class="imitate-dhtmlx-fieldset">
            <legend>搜索结果</legend>
            <div class="row" style="height: 95%;">
                <div class="col-sm" id="gridParent">
                    <div id="grid" style="height: 100%;"></div>
                    <script type="text/javascript">
                        var registGrid = new dhtmlXGridObject('grid');
                        registGrid.setHeader("jsonDate,序号,发票号,病人编号,病人姓名,收费时间,身份证号,费用类别,总金额,收费员,主治医生");
                        registGrid.setColTypes("ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro");
                        registGrid.setInitWidths("0,100,*,100,100,100,250,100,100,100,100");
                        registGrid.setColAlign("center,center,center,center,center,center,center,center,center,center,center");
                        registGrid.setSkin("dhx_skyblue");
                        registGrid.setColumnHidden(0, true);
                        registGrid.enableAutoWidth(true);
                        registGrid.init();

                        registGrid.addRow(1, [
                            1,2,3,4,5,6
                        ]);
                        registGrid.addRow(2, [
                            1,2,3,4,5,6
                        ]);
                        registGrid.addRow(3, [
                            1,2,3,4,5,6
                        ]);
                        registGrid.addRow(4, [
                            1,2,3,4,5,6
                        ]);
                        registGrid.addRow(5, [
                            1,2,3,4,5,6
                        ]);
                    </script>
                </div>
            </div>
            <div class="row" style="height: 5%;">
                <div class="col-sm">
                    分页数据
                </div>
            </div>
        </fieldset>

    </div>
</div>
</body>
</html>